<template>
  <div class="flex flex-col h-[100%] bg relative overflow-auto" id="bg">
    <div v-show="showLayout" class="header sticky top-0 z-2 border-b-1 border-[#EAEAEA] flex justify-center" :class="scrollTop>40?'bg-white':''">
      <div class="w-[14rem] h-[.9rem] flex items-center justify-between">
        <div class="flex items-center gap-[.1rem]">
          <img src="@/assets/logo.png" alt="MBpay" class="w-[.4rem] h-[.4rem]" />
          <span class="text-[.28rem] font-bold">MBpay</span>
        </div>
        <a-dropdown v-if="isMobile">
          <MenuOutlined style="font-size:.4rem;"/>
          <template #overlay>
            <a-menu v-model:selectedKeys="current">
              <a-menu-item key="home">
                <div @click="navTo('home')" :class="navActive=='home'?'active':''">{{ $t('about MBpay') }}</div>
              </a-menu-item>
              <a-menu-item key="product">
                <div @click="navTo('product')" :class="navActive=='product'?'active':''">{{ $t('introduction') }}</div>
              </a-menu-item>
              <a-menu-item key="sponsor">
                <div @click="navTo('sponsor')" :class="navActive=='sponsor'?'active':''">{{ $t('sponsor') }}</div>
              </a-menu-item>
              <a-menu-item key="download">
                <div @click="navTo('download')" :class="navActive=='download'?'active':''">{{ $t('downloadapp') }}</div>
              </a-menu-item>
              <a-menu-item key="help">
                <div @click="navTo('help')" :class="navActive=='help'?'active':''">{{ $t('help') }}</div>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <nav v-else class="flex items-center flex-1 justify-center text-[.14rem] gap-[.8rem]">
          <li @click="navTo('home')" :class="navActive=='home'?'active':''">{{ $t('about MBpay') }}</li>
          <li @click="navTo('product')" :class="navActive=='product'?'active':''">{{ $t('introduction') }}</li>
          <li @click="navTo('sponsor')" :class="navActive=='sponsor'?'active':''">{{ $t('sponsor') }}</li>
          <li @click="navTo('download')" :class="navActive=='download'?'active':''">{{ $t('downloadapp') }}</li>
          <li @click="navTo('help')" :class="navActive=='help'?'active':''">{{ $t('help') }}</li>
        </nav>
        <div class="flex items-center" v-if="!isMobile">
          <!-- en -->
          <button class="login">H5登录</button>
        </div>
      </div>
    </div>
    <div class="flex-1">
      <router-view :isMobile="isMobile"></router-view>
    </div>
    <footer v-show="showLayout" class="bg-black shrink-0 pt-[.5rem] flex flex-col">
      <div class="mol w-[14rem] flex justify-between mx-auto flex-1">
        <div class="flex-1 mol-1">
          <div class="flex items-center gap-[.1rem]">
            <img src="@/assets/logo.png" alt="MBpay" class="w-[.4rem] h-[.4rem]" />
            <span class="text-[.28rem] text-white font-bold">MBpay</span>
          </div>
          <div class="mt-[.4rem] mb-[.65rem] text-white text-[.2rem] leading-[.3rem]">
            <p>即刻下载</p>
            <p>让您的生活，一触即付</p>
          </div>
          <div class="flex items-center gap-[.32rem]">
            <a href=""><img src="" alt="" class="w-[.2rem] h-[.2rem]"></a>
            <a href=""><img src="" alt="" class="w-[.2rem] h-[.2rem]"></a>
            <a href=""><img src="" alt="" class="w-[.2rem] h-[.2rem]"></a>
            <a href=""><img src="" alt="" class="w-[.2rem] h-[.2rem]"></a>
            <a href=""><img src="" alt="" class="w-[.2rem] h-[.2rem]"></a>
          </div>
        </div>
        <div class="flex flex-2 justify-between mol-2">
          <div class="list">
            <h3>关于</h3>
            <p><a href="">关于我们</a></p>
            <!-- <p><a href="">白皮书</a></p> -->
            <!-- <p><a href="">公告合同</a></p> -->
          </div>
          <div class="list">
            <h3>法律&隐私</h3>
            <p><a :href="info.ServiceAgreement" target="_blank">用户协议</a></p>
            <p><a :href="info.PrivacyTerms" target="_blank">隐私条款</a></p>
            <p><a href="">免责申明</a></p>
          </div>
          <div class="list">
            <h3>产品</h3>
            <p><a href="">快捷充值</a></p>
            <p><a href="">买入币种</a></p>
            <p><a href="">邀请福利</a></p>
          </div>
          <div class="list">
            <h3>支持</h3>
            <p><a :href="info.Help" target="_blank">帮助中心</a></p>
            <p><a href="">下载APP</a></p>
            <p><a :href="info.CustomerService" target="_blank">在线客服</a></p>
          </div>
        </div>
      </div>
      <div class="w-[14rem] mx-auto text-[#E0EAFF] text-[.18rem] justify-center leading-[1.2rem] flex items-center gap-[.3rem] border-t-1 border-[rgba(255,255,255,0.2)]">
        <span>Support</span>
        <span>API</span>
        <span>Privacy Policy</span>
        <span>Cookie Policy</span>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { MenuOutlined } from '@ant-design/icons-vue';

const route = useRoute();
const router = useRouter();

const isMobile = ref(false)

const scrollTop = ref(0)

const info = ref({})

onMounted(() => {
  function refreshRem() {
    var docEl = document.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 19.2;
    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { //移动端
      isMobile.value = true;
      docEl.style.fontSize = '48px';
    } else {
      if (rem > 100) rem = 100;
      docEl.style.fontSize = rem + 'px';
    }
  }
  window.addEventListener('resize', refreshRem);
  refreshRem();

  nextTick(() => {
    var bg = document.getElementById('bg');
    if (bg) {
      bg.addEventListener('scroll', (e) => {
        scrollTop.value = e.target.scrollTop
      })
    }
  })

  fetch('https://api.mbpay.world/v1/h5/download')
    .then(response => response.json())
    .then(data => {
      console.log('Fetched data:', data);
      info.value = data?.data
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
})

watch(() => route.name, () => {
  var bg = document.getElementById('bg');
  bg.scrollTo(0, 0);
}, {
  deep: true,
  immediately: true
})

const showLayout = computed(() => {
  return !(['sponsor', 'sponsor-detail'].includes(route.name) && isMobile.value)
})

const navActive = computed(() => {
  return route.name;
});

const current = computed(() => {
  return [route.name];
});

const navTo = (name) => {
  if (name == 'help') {
    window.open('https://help.mbpay.world', '_blank');
  } else {
    router.push({ name });
  }
};
</script>

<style scoped lang="less">
nav li {
  cursor: pointer;
  font-size: .22rem;
  color: #1A1A1A;
  font-weight: 600;
  border: .2rem solid transparent;
  &.active, &:hover {
    color: #006EF9
  }
}
.bg {
  background: url('@/assets/bg.png') center 0 no-repeat;
  background-size: cover;
}
.list {
  h3 {
    font-size: .2rem;
    font-weight: 600;
    color: #fff;
  }
  p {
    margin-top: .28rem;
    font-size: .18rem;
    a {
      color: rgba(255,255,255,0.6);
    }
  }
}
.login {
  padding: 0 .12rem;
  height: .4rem;
  border-radius: .08rem;
  background-color: #006EF9;
  color: #fff;
  font-size: .18rem;
  line-height: 1;
}
</style>

<style lang="less" scoped>
@media (max-width: 600px) {
  
  .mol {
    flex-direction: column;
    .mol-1 {
      padding: 0 .4rem;
    }
    .mol-2 {
      display: grid;
      padding: 0 .4rem;
      gap: .2rem;
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
.header {
  padding-left: .4rem;
  padding-right: .4rem;
  transition-duration: .3s;
}
</style>